<style type="text/css">
  td.fields { margin-top: 1em; line-height: 2; }
</style> 

$form

<p>&nbsp;</p>

The form demonstrates a custom 
<a href="$context/javadoc/net/sf/clickclick/examples/control/RichTextArea.html">RichTextArea</a>
control using the 
<a target="blank" href="http://sourceforge.net/projects/tinymce/">TinyMCE</a>
JavaScript library. The control overrides the Field method <tt>getHtmlImports()</tt> to include its 
JavaScript imports automatically:

<pre class="prettyprint" style="border: 1px solid #888888; overflow:auto; padding: 1em">
protected static final String HTML_IMPORTS =
    "&lt;script type=\"text/javascript\" src=\"{0}/tiny_mce/tiny_mce.js\"&gt;&lt;/script&gt;\n";

public String getHtmlImports() {
    String[] args = { getContext().getRequest().getContextPath() };
    return MessageFormat.format(HTML_IMPORTS, args);
} </pre>

The control is rendered using a Velocity template 
<tt>(/examples/control/RichTextArea.htm)</tt> which is loaded from the classpath:

<pre class="prettyprint" style="border: 1px solid #888888; overflow:auto; padding: 1em">
${textArea}
&lt;script type="text/javascript"&gt;
tinyMCE.init({
   theme : "${theme}",
   mode : "exact",
   elements : "${id}"
});
&lt;/script&gt;
</pre>

The control's <tt>toString()</tt> method merges the <tt>RichTextArea.htm</tt>
template and the model returning rendred HTML.

<pre class="prettyprint" style="border: 1px solid #888888; overflow:auto; padding: 1em">
public String toString() {
    Map model = new HashMap();
    model.put("textArea", super.toString());
    model.put("theme", getTheme());
    model.put("id", getId());

    return getContext().renderTemplate(getClass(), model);
} </pre>


